<template>
    <div class="box">

        <div class="box-header">
            <div class="box-logo" @click="backnext">&lt{{route.params.name}}</div>
            <p class="input-wrapper">
                <el-input class="box-input" v-model="input1" placeholder="搜索" :prefix-icon="Search" />
            </p>
            <div class="open-app">打开App</div>
        </div>
        <div class="fixeBoxBig">
            <div class="fixicon" v-if="!showBookList">
                <div class="scroll-box">
                    <div class="first-box">
                        <div class="second-box" v-for="(a ,index) in categotySecondList.metadata">
                            <div @click="getIndex(-1)" :class="['scroll-item', -1 == flag && 'active']">全部</div>
                            <div :class="['scroll-item', index == flag && 'active']" @click="getIndex(index)"
                                v-for="(item, index) in a.metadataValues" :key="index">{{ item.name }}</div>
                        </div>
                    </div>
                </div>
                <div @click="showBookList = !showBookList" class="showicon">﹀</div>
            </div>
        </div>
        <div class="showList" v-if="showBookList">
            <div class="booklistTop" >
                <div class="check">请选择分类</div>
                <div class="chexkIcon" @click="showBookList = !showBookList">︿</div>
            </div>
            <div class="bookList" v-for="(a ,index) in categotySecondList.metadata">
                <div class="bookList-item" >全部</div>
                <div class="bookList-item" @click="getIndex(index)" v-for="(item, index) in a.metadataValues" :key="index">{{ item.name }}</div>
            </div>
        </div>
        <div class="sort-box">
            <div :class="['sort-item','activesort']" >综合排序</div>
            <div :class="['sort-item']" >最多播放</div>
            <div :class="['sort-item']" >最近更新</div>
        </div>
        <div class="itemsList-box" v-for="(item,index) in categoryThirdList?.albums" :key="index">
            <div class="box-left"><img class="left-img" :src="`https://imagev2.xmcdn.com/${ item.albumCoverPath }`" alt=""></div>
            <div class="box-right">
                <div class="right-title">{{item.albumTitle}}</div>
                <div class="rifght-tetx">{{item.intro}}</div>
                <div class="right-logo">
                <div class="iconfont icon-youyinpin"></div>  
                <div class="num">{{item.albumTrackCount}}</div>
                <div class="iconfont icon-erji"></div>
                <div class="count-item">{{(item.albumPlayCount/100000000).toFixed(2)}}亿 </div>  
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Header from "@/components/Header/Header"
import { onMounted, computed, ref, onUnmounted } from "vue"
import { useRouter, useRoute } from "vue-router";
import categoryApi from "@/api/category";
import { Calendar, Search } from '@element-plus/icons-vue'
import { RFC_2822 } from "moment";
const input1 = ref('')
const flag = ref(-1)
const showBookList = ref(false)
const flagsort=ref(0)
const router = useRouter()
const route = useRoute()
const categotySecondList = ref([])
// const secondListValue=computed(()=>categotySecondList?.metadata[0].metadataValues)
// const categoryId = ref(2)
const categoryThirdList=ref([])
const pageNum = ref(1)
const pageSize = ref(20)
// const name=route.params.name
const sort = ref(1)
// const metadataValues=ref(`${name}`)
const backnext = () => {
    router.back()
}
const getIndex = (index) => {
    flag.value = index
}
const getCategorySecond =async  () => {
    const id = route.params.id
    // console.log(id)
    let result = await categoryApi.reqCatergortSecond(id)
    // console.log(333, result)
    categotySecondList.value=result.data
}
const getCategoryThird = async() => {
    const id = route.params.id
    const name=route.params.name
    // console.log(id, name)
    let result =await categoryApi.reqCategoryThirdList(pageNum.value, pageSize.value, sort.value, id, name)
    // console.log(result)
    categoryThirdList.value=result.data
}
onMounted(() => {
    getCategorySecond()
    getCategoryThird()
})
</script>

<style scoped>
.box {
    height: 100%;
    width: 100%;

    .box-fixed {}

    .box-header {
        position: fixed;
        top: 0;
        left: 0;
        background-color: white;
        z-index: 3;
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0 4px;
        padding-top: 5px;

        .box-logo {
            font-size: 16px;
            font-weight: 400;
            width: 80px;
            text-align: center;
        }

        .input-wrapper {

            margin-left: 10px;
            width: 190px;

            ::v-deep(.el-input__wrapper) {
                border-radius: 20px;
                background-color: #eff1f4;

            }
        }

        .open-app {
            border: 1px solid #ff4613;
            border-radius: 20px;
            height: 26px;
            width: 70px;
            line-height: 26px;
            text-align: center;
            color: #ff4613;
            margin-left: 10px;

        }

    }

    .fixicon {
        position: relative;

        .showicon {
            position: absolute;
            right: 0;
            top: 0px;
            background-color: white;
            z-index: 6;
            width: 50px;
            height: 44.4px;
            line-height: 44.4px;
            text-align: center;
            font-weight: 300;
            color: #c0b8b8;
            font-size: 20px;
            border-left: 1px solid #c0b8b8;
            border-bottom: 1px solid #c7bfbf;
        }
    }

    .scroll-box {
        margin-top: 50px;
        width: 100%;
        overflow: hidden;


        .first-box {
            overflow-x: scroll;
            border-bottom: 1px solid #c4bcbc;

            &::-webkit-scrollbar {
                display: none;
            }

            .second-box {
                /* padding: 10px 0; */
                display: flex;
                align-items: center;

                .scroll-item {
                    /* width: 18%; */
                    height: 100%;
                    line-height: 100%;
                    flex-shrink: 0;
                    padding: 10px 0;
                    margin-left: 30px;
                    font-size: 16px;
                    color: #767373;

                }

                .active {
                    border-bottom: 3px solid red;
                    color: black;
                    font-size: 22px;
                    flex-shrink: 0;

                }

            }
        }
    }

    .showList {
        margin-top: 50px;
        background-color: white;
        z-index: 8;

        .booklistTop {
            border-bottom: 1px solid #aaa;
            display: flex;
            justify-content: space-between;
            height: 30px;
            line-height: 30px;

            .check {
                margin-left: 16px;
                color: #aaa;
            }

            .chexkIcon {
                width: 50px;
                text-align: center;
                color: red;
                border-left: 1px solid #aaa;
            }
        }

        .bookList {
            display: flex;
            flex-wrap: wrap;
            height: 200px;
            overflow: hidden;
            overflow-y: scroll;

            &::-webkit-scrollbar {
                display: none;
            }

            .bookList-item {
                width: 26%;
                background-color: #e6dfdf;
                border-radius: 4px;
                text-align: center;
                height: 30px;
                font-size: 14px;
                line-height: 30px;
                margin-left: 18px;
                margin-top: 18px;
            }
        }
    }
    .sort-box{
        display: flex;
        text-align: center;
        align-items: center;
        .sort-item{
            margin-left: 10px;
            margin-top: 10px;
            font-size: 16px;
            padding: 4px 8px;
        }
        .activesort{
            border: 1px solid #ff4613;
            color: #ff4613;
            border-radius: 20px;
        }
    }
    .itemsList-box{
display: flex;
padding: 10px;
.box-left{
    width: 70px;
    height:70px;
    .left-img{
        width: 70px;
    height:70px;
    }
}
.box-right{
margin-left: 10px;
.right-title{
    font-size: 14px;

}
.rifght-tetx{
    color: #bbb;
}
.right-logo{
    display: flex;
    align-items: center;
    .num{
        margin-left: 10px;
        margin-right: 30px;
    }
    .count-item{
        margin-left: 10px;
    }
}
}
    }
}
</style>